<template><div>
<h1 style="color: tomato">员工编辑</h1>
<el-form ref="form" :model="user" label-width="80px">
<!--    隐藏域-->
  <el-input type="hidden" v-model="user.id"></el-input>

<el-form-item label="姓名"  label-width="80px">
  <el-col :span="11"></el-col>
  <el-input v-model="user.name"></el-input>
</el-form-item>

  <el-form-item label="电话"  label-width="80px">
    <el-col :span="11"></el-col>
    <el-input v-model="user.phone"></el-input>
  </el-form-item>

<el-form-item label="注册时间"  label-width="80px">
  <el-col :span="11">
    <el-date-picker type="date" placeholder="选择日期" v-model="user.ctime" style="width: 100%;"></el-date-picker>
  </el-col>

  <el-button type="primary" @click="onSubmit">提交</el-button>
  <el-button>取消</el-button>
</el-form-item>
</el-form>
</div></template>

<script>
import Qs from 'qs'

export default {
  data() {
    return {
      id:this.$route.params.id, //用户ID接收传递过来的参数
      user:{    //声明用户对象，要在当前页面显示的
        id:'',
        name: '',
        phone: '',
        ctime:""
      },
    }
  },
  methods: {
    onSubmit() {
      let vm= this;
     //发送请求到后端 执行修改
      this.axios({
        url:"http://localhost:9090/vue/update",
        method:"POST",
        data:vm.user,
        transformRequest: [function (data) {
          return Qs.stringify(data)
        }]
      }).then(function (res){
        console.log(res.data)
        if (res.data.code==0){
          vm.$message.success("修改成功");
          //跳转到用户列表
          vm.$router.push("home");
        }
      });
    }
  },
  mounted() {
    //页面挂载时根据id查询用户给user赋值
    let vm = this;
    //发送删除数据的请求
    this.axios({
      url:`http://localhost:9090/vue/queryById/${vm.id}`,
      method:"GET",
    }).then(function (res){
      //  查询到的结果 给user对象赋值
      vm.user = res.data.data;

    }).catch(function (err){

    });
  }
}
</script>

<style scoped>

</style>
